<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Visibility Attributes Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Visibility</h1>
        </gs-jumbo>
            
        <gs-container padded>
            <h3>Attributes:</h3>
            <pre><code>show-on-phone
show-on-tablet
show-on-desktop
hide-on-phone
hide-on-tablet
hide-on-desktop
show-xs
show-small
show-medium
show-large
hide-xs
hide-small
hide-medium
hide-large</code></pre>
            
            <h3>Description:</h3>
            <p>These attributes are for making elements appear and disappear depending on screen size.</p>
            
            <h3>Ranges:</h3>
            <pre><code>phone   //             &lt;= 321px
tablet  //&gt;= 321px AND &lt;= 768px
desktop //&gt;= 768px
xs      //             &lt;= 768px
small   //&gt;= 768px AND &lt;= 992px
medium  //&gt;= 992px AND &lt;= 1200px
large   //&gt;= 1200px</code></pre>
            
            <h3>Examples:</h3>
            <div class="doc-example-description">
                <span class="h3">Device Attributes Example:</span>
                <p>In this example we have a list of divs each with one of the hide or show attributes. In each div are some numbers and the name of the attribute that was used on it. The numbers are just to show at what sizes an element would be visible.</p>
                <ul>
                    <li>1 means visible at phone size</li>
                    <li>2 means visible at tablet size</li>
                    <li>3 means visible at desktop size</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <div>1 2 3 nothing</div>
                    <div show-on-phone>1 show-on-phone</div>
                    <div show-on-tablet>2 show-on-tablet</div>
                    <div show-on-desktop>3 show-on-desktop</div>
                    <div hide-on-phone>2 3 hide-on-phone</div>
                    <div hide-on-tablet>1 3 hide-on-tablet</div>
                    <div hide-on-desktop>1 2 hide-on-desktop</div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Page Size Attributes Example:</span>
                <p>In this example we have a list of divs each with one of the hide or show attributes. In each div are some numbers and the name of the attribute that was used on it. The numbers are just to show at what sizes an element would be visible.</p>
                <ul>
                    <li>1 means visible at smaller then small size</li>
                    <li>2 means visible at small size</li>
                    <li>3 means visible at medium size</li>
                    <li>4 means visible at large size</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <div>1 2 3 4 nothing</div>
                    <div show-xs>1 show-xs</div>
                    <div show-small>2 show-small</div>
                    <div show-medium>3 show-medium</div>
                    <div show-large>4 show-large</div>
                    <div hide-xs>2 3 4 hide-xs</div>
                    <div hide-small>1 3 4 hide-small</div>
                    <div hide-medium>1 2 4 hide-medium</div>
                    <div hide-large>1 2 3 hide-large</div>
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>
